import React from 'react';
import { createModalContainer } from '@/components/changeModal';
import { connect } from 'dva';
import {Button, message, Form, Spin, Upload} from 'antd';

const FormItem = Form.Item;
@Form.create()
class ImportExpressComponent extends React.Component {
    constructor(){
        super();
        this.state ={
            data:{},
            fileList: [],
            uploading: false,
        }
    }

    componentWillMount() {
        window.Isoption = false;
      }

    componentWillMount() {
        window.Isoption = false;
        const { dispatch} = this.props;
        dispatch({
            type: 'orderList/GetTaskName',
            payload: {
                TaskType: 2
            },
            callBack: {
                success: res => {
                    if(res.Code===0) {
                        this.setState({
                            data: res.Data,
                        })
                    }
                },
                error: res=> {
                    message.error(res.Msg)
                }
            }
        })
    }

    // 取消
    handleCancel =() => {
        this.props.cancel();
    }

    handleUpload = (e) => {
        e.preventDefault();
        const { dispatch, taskName} = this.props;
        const { fileList } = this.state;
        const formData = new FormData();
        formData.append('FileContent', fileList[0]);
        formData.append('TaskNumber', taskName.TaskNumber);
        this.props.form.validateFields((err, values)=> {
            if(!err) {
                dispatch({
                    type: 'deliverManage/ImportExpress',
                    payload:formData,
                    callback: {
                        success: res => {
                            if(res.Code ===0) {
                                message.success('上传成功');
                                this.props.ok();
                            }
                        },
                        error: res => {
                            message.error(res.Msg)
                        }
                    }
                })
            }
        })
    }


    render() {
        const {loading1, loading2} = this.props;
        const {getFieldDecorator} = this.props.form;
        const { fileList } = this.state;
        const formItemLayout = {
            labelCol: {
                span: 4,
              },
              wrapperCol: {
                span: 19,
              },
          }
          const props = {
            onRemove: (file) => {
              this.setState((state) => {
                const index = state.fileList.indexOf(file);
                const newFileList = state.fileList.slice();
                newFileList.splice(index, 1);
                return {
                  fileList: newFileList,
                };
              });
            },
            beforeUpload: (file) => {                           
              this.setState(state => ({
                fileList: [...state.fileList, file],
              }));
              return false;
            },
            fileList,
          };
        return (
            <Form style={{marginTop: 24}}>
                <Spin spinning={loading1}>
                    <FormItem
                        {...formItemLayout}
                        label="文件"
                        extra="最大支持10000条记录（支持csv、xls、xlsx，文件大小请控制在1MB以内）"
                    >
                    {getFieldDecorator('file', {
                        rules:[{required: true, message: '此项为必选项'}]
                    })(
                        <Upload {...props}>
                            <Button>选择文件</Button>
                       </Upload>
                    )}                 
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label=" "
                        colon={false}
                    >
                        <div>
                            <a href="http://xkdsaas.oss-cn-shanghai.aliyuncs.com/xkdnewyun/systemfile/store/excel/importorder.xlsx" download>
                                下载批量发货模板
                            </a>
                        </div>
                    </FormItem>                    
                    <FormItem className="xkd-model-footBtn">
                        <Button
                            type="primary"
                            onClick={this.handleUpload}
                            loading={loading2}
                        >
                            确认上传
                        </Button>
                </FormItem>
                </Spin>
            </Form>
        )
    }
}

const ImportExpress  = createModalContainer(
    connect(({orderList, global, loading})=> ({
        taskName: orderList.taskName,
        loading1: loading.effects['orderList/GetTaskName'],
        loading2: loading.effects['deliverManage/ImportExpress']
    }))(ImportExpressComponent),
    true,
    true
);

export default ImportExpress;